<template>
  <layout title="新建报修" :showBack="true" :showTabBar="false">
    <x-icon v-if="showBtn" slot="icon" @click="onSave" type="checkmark" style="fill:#fff;position:relative;top:-4px;right:3px;"></x-icon>

    <group title="故障信息">
      <x-input title="设备名称" v-model="form.device_name" ></x-input>
      <selector title="故障类型" v-model="form.type" :options="dicObjArray['故障类型']" ></selector>
      <x-textarea title="故障描述" v-model="form.content" ></x-textarea>
      <x-input title="客户姓名" v-model="form.customer_name" ></x-input>
      <x-input type="number" title="联系方式" v-model="form.customer_tel" ></x-input>
      <x-input title="客户地址" v-model="form.customer_address" ></x-input>
      <selector title="是否过保" v-model="form.is_expired" :options="dicObjArray['过保状态']" ></selector>

      <attachement :files.sync="form.files1" :disabled="false"></attachement>

    </group>

  </layout>
</template>

<script>
  import {
    Group, Cell, Datetime, XInput, FormPreview, XButton, Selector,
    XTextarea, XSwitch, Rater, Previewer, TransferDom, Icon,
    Timeline, TimelineItem
  } from 'vux'
  import { mapState, mapGetters } from 'vuex'
  import Layout from './Layout.vue'
  import { repair as api, user as userApi, file as fileApi } from '../api'
  import Attachement from './Attachment'
  import moment from 'moment'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Group,
      Cell,
      Datetime,
      XInput,
      FormPreview,
      XButton,
      Layout,
      Selector,
      XTextarea,
      XSwitch,
      Rater,
      Previewer,
      Icon,
      Attachement,
      Timeline,
      TimelineItem,
    },
    data() {
      return {
        title: '', //标题
        id: null, //报修Id
        status: null,//报修状态
        persons: [],//技术员
        invoke: null,//保存按钮调用的方法
        showBtn: true, //显示菜单右侧按钮
        form: {
          endTime: null,
          device_name: '',
          type: '',
          content: null,
          is_expired: 0,
          customer_name: null,
          customer_tel: null,
          customer_address: null,
          amount: null,
          fact_amount: null,
          do_remark: null,
          do_person_id: null,
          do_person_name: null,
          eval_content: null,
          eval_score: 0,
          result: null,
          reason: null,
          files1: null,
          files2: null
        },
      }
    },
    computed: {
      ...mapGetters(['dicObjArray']),
    },
    methods: {
      async onSave() {
        let data = {
          id: this.id,
          device_name: this.form.device_name,
          type: this.form.type,
          content: this.form.content,
          customer_name: this.form.customer_name,
          customer_tel: this.form.customer_tel,
          customer_address: this.form.customer_address,
          is_expired: this.form.is_expired,
          files1: this.form.files1
        }
        let result = await api.add(data)
        if (!result.success) {
          this.$vux.toast.show({
            type: 'cancel',
            text: '保存失败'
          })
          return
        }
        const that = this
        this.$vux.toast.show({
          text: '保存成功',
          onHide() {
            that.$router.go(-1)
          }
        })
      },
    },
    async mounted() {
      this.$store.commit('showBack', true)
      this.id = this.$route.query.id
      if (this.id) {
        //获取数据
        let ret = await api.detail({ id: this.id })
        this.form = ret.data
        this.form.eval_score = this.form.eval_score || 0
        this.sign.repair_id = this.id
      }
    }
  }

</script>

<style scoped>
  .previewer-demo-img {
    margin-left: 10px;
  }

  .img-list {
    display: block;
    float: left;
    text-align: left;
  }

  .img-list img {
    height: 60px;
  }

  .img-list span {
    display: block;
    font-size: 12px;
    text-align: center;
  }

</style>
